<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form
        :inline="true"
        size="small"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="渠道名称：">
          <el-input
            v-model="formInline.channelName"
            placeholder="渠道名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="default" icon="el-icon-refresh" @click="rest"
            >清空筛选</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small" @click="openAdd"
          >新增渠道</el-button
        >
        <el-button type="default" size="small">批量导入</el-button>
        <el-button type="default" size="small">批量修改</el-button>
        <el-button type="default" size="small">批量导出</el-button>
        <el-button type="default" size="small">批量删除</el-button>
        <!-- <el-button
          type="default"
          size="small"
          :loading="eloading"
          @click="exportExcel()"
          >导出excel</el-button
        > -->
      </div>
      <!-- 操作区域 end -->
      <el-table class="el_table" size="small" :data="tableData">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          prop="channelName"
          label="渠道名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="downloadCnt"
          label="下载量"
          show-overflow-tooltip
        />
        <el-table-column
          prop="registerCnt"
          label="注册数"
          show-overflow-tooltip
        />
        <el-table-column prop="uv" label="UV" show-overflow-tooltip />
        <el-table-column prop="cpa" label="CPA" show-overflow-tooltip />
        <el-table-column
          prop="settleRegisterCnt"
          label="结算注册登录"
          show-overflow-tooltip
        />
        <el-table-column
          prop="settleRegisterRatio"
          label="结算登录率"
          show-overflow-tooltip
        />
        <el-table-column prop="cost" label="成本" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.cost ? scope.row.cost.toFixed(2) : ""
          }}</template>
        </el-table-column>
        <el-table-column
          prop="actualPrice"
          label="实际价格"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.actualPrice ? scope.row.actualPrice.toFixed(2) : ""
          }}</template>
        </el-table-column>
        <el-table-column prop="uvCost" label="UV成本" show-overflow-tooltip />
        <el-table-column
          prop="loginOutputRate"
          label="登录产出比"
          show-overflow-tooltip
        />

        <el-table-column
          prop="address"
          label="操作"
          width="200px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="copyPath(scope.row)"
              >复制链接</el-button
            >
            <el-button
              type="primary"
              size="mini"
              plain
              @click="openConfig(scope.row)"
              >配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination
          background
          layout="sizes, total,prev, pager, next, jumper"
          :total="pageTotal"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :current-page.sync="pageNumber"
          @current-change="getList"
          @size-change="changePageSize"
        />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 自定义配置弹框 开始 -->
    <glsx-dialog
      :show="showDialog"
      title="自定义配置"
      width="460px"
      @close="closeConfig"
    >
      <div>
        <el-form
          :model="configForm"
          ref="configForm"
          :rules="configFormRules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="打折率：" prop="discountRate">
            <el-input
              v-model="configForm.discountRate"
              class="a_input"
            ></el-input>
          </el-form-item>
          <el-form-item label="单价：" prop="unitPrice">
            <el-input v-model="configForm.unitPrice" class="a_input"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="" slot="footer">
        <el-button size="small" type="success" plain @click="saveInfo()"
          >确定</el-button
        >
        <el-button size="small" type="default" plain @click="closeConfig"
          >取消</el-button
        >
      </div>
    </glsx-dialog>
    <!-- 自定义配置弹框 end -->

    <!-- 新增渠道 开始 -->
    <glsx-dialog :show="addDialog" title="新增渠道" @close="closeAdd">
      <div>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addFormRules"
          label-width="120px"
        >
          <el-form-item label="渠道名称" prop="channelName">
            <el-input v-model="addForm.channelName"></el-input>
          </el-form-item>
          <el-form-item label="渠道码" prop="channel">
            <el-input v-model="addForm.channel"></el-input>
          </el-form-item>
          <el-form-item label="打折率" prop="discountRate">
            <el-input v-model="addForm.discountRate"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="unitPrice">
            <el-input v-model="addForm.unitPrice"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="" slot="footer">
        <el-button
          size="small"
          type="success"
          plain
          :loading="aloading"
          @click="addChannel()"
          >确定</el-button
        >
        <el-button size="small" type="default" plain @click="closeAdd"
          >取消</el-button
        >
      </div>
    </glsx-dialog>
    <!-- 新增渠道 end -->
  </div>
</template>

<script>
import {
  GETCHANNELLIST,
  CHANNELEXPORTURL,
  GETCITYLIST,
  GETCHANNELURL,
  GETCHANNELSETTING,
  CHANNELINFOSETTING,
  ADDCHANNELINFO,
} from "@/http/interface";
import { showToast, showModal, deepClone } from "@/common/util";
import { exportExcel } from "@/common/common";
import GlsxDialog from "@/components/Dialog/index";
export default {
  components: {
    GlsxDialog,
  },
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 30, 40],
      pageSize: 10,
      cityList: [],
      ORDERTYPELIST: {
        80: "会员",
        90: "商品",
        100: "话费",
      },
      typeList: [
        { name: "会员", id: 80 },
        { name: "商品", id: 90 },
        { name: "话费", id: 100 },
      ],
      eloading: false,
      orderTime: [],
      configForm: {},
      showDialog: false,
      configFormRules: {
        discountRate: [
          {
            required: true,
            message: "请输入打折率",
            trigger: "blur",
          },
        ],
        unitPrice: [
          {
            required: true,
            message: "请输入单价",
            trigger: "blur",
          },
        ],
      },
      productId: "",
      addForm: {},
      addDialog: false,
      addFormRules: {
        channelName: [
          {
            required: true,
            message: "请输入渠道名称",
            trigger: "blur",
          },
        ],
        channel: [
          {
            required: true,
            message: "请输入渠道码",
            trigger: "blur",
          },
        ],
        discountRate: [
          {
            required: true,
            message: "请输入打折率",
            trigger: "blur",
          },
        ],
        unitPrice: [
          {
            required: true,
            message: "请输入单价",
            trigger: "blur",
          },
        ],
      },
      aloading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 重置 */
    rest() {
      this.formInline = {};
      this.orderTime = [];
      this.getList();
    },

    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let oParams = JSON.parse(JSON.stringify(this.formInline));
      let n = this.orderTime;

      if (n && n.length > 0) {
        oParams.sDate = n[0];
        oParams.eDate = n[1];
      }

      oParams.pageNumber = this.pageNumber;
      oParams.pageSize = this.pageSize;
      return oParams;
    },

    /** 获取列表 */
    getList() {
      let _this = this;
      let oParams = this.getParams();
      GETCHANNELLIST(oParams).then((res) => {
        let obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
      });
    },

    // 导出excel
    exportExcel() {
      let _this = this;
      let oParams = this.getParams();
      let options = {};
      options.method = "GET";
      options.data = oParams;
      options.url = CHANNELEXPORTURL;
      options.fileName = "渠道列表.xlsx";
      options.success = function () {
        _this.eloading = false;
      };
      _this.eloading = true;
      exportExcel(options);
    },

    // 复制链接
    copyPath(row) {
      let _this = this;
      GETCHANNELURL({ channel: row.channel }).then((res) => {
        _this.$copyText(res.data).then((res) => {
          showToast({
            message: "复制成功",
            type: "success",
          });
        });
      });
    },

    // 打开产品配置
    openConfig(row) {
      this.showDialog = true;
      this.productId = row.id;
      GETCHANNELSETTING({ channelId: row.id }).then((res) => {
        this.configForm = res.data || {};
      });
    },

    // 关闭产品配置
    closeConfig() {
      this.showDialog = false;
      this.productId = "";
      this.configForm = {};
      this.$refs.configForm.clearValidate();
    },

    // 保存配置
    saveInfo() {
      let _this = this;
      _this.$refs.configForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = JSON.parse(JSON.stringify(_this.configForm));
        oParams.channelId = _this.productId;
        CHANNELINFOSETTING(oParams).then((res) => {
          if (res.code == 200) {
            showToast({
              message: "配置成功",
              type: "success",
            });
            _this.closeConfig();
            //_this.getList();
          }
        });
      });
    },

    // 打开新增渠道弹框
    openAdd() {
      this.addDialog = true;
    },

    // 关闭新增渠道弹框
    closeAdd() {
      this.addDialog = false;
      this.addForm = {};
      this.$refs.addForm.resetFields();
    },

    // 新增渠道
    addChannel() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }

        let o = _this.addForm;
        _this.aloading = true;
        ADDCHANNELINFO(o).then((res) => {
          _this.aloading = false;
          if (res.code == 200) {
            showToast({
              message: "配置成功",
              type: "success",
            });
            _this.closeAdd();
            _this.getList();
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
